<template>
  <div class="login">
  	<div class="logo"><img src="../assets/test_logo.png" alt="">考试系统</div>
  	  <el-row type="flex" class="row-bg" justify="space-around">
  			<el-col :sm="16" :md="14" :lg="12"  :xs="16">
  				<div class="grid-content bg-purple-light">
			    	<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" class="demo-ruleForm" @keyup.enter.native="submitForm('ruleForm2')">
			        <h4>密码登录</h4>
			        <el-form-item prop="name">
					    	<el-input  type="text" class="my-input" v-model="ruleForm2.name" auto-complete="off" placeholder="请输入账号（身份证）"></el-input>
					    </el-form-item>
					    <el-form-item prop="password1">
					    	<el-input  type="password" class="my-input" v-model="ruleForm2.password1" auto-complete="off" placeholder="请输入密码（默认身份证后6位）"></el-input>
					    </el-form-item>
					    <el-form-item>
					    	<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
					    </el-form-item>
						</el-form>
				</div>
  		</el-col>
  	</el-row>
  </div>
</template>

<script>
  export default {
  	name: 'login',
    data() {
//  	正则表达式验证身份号码
    	var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
      var name1 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'));
        } else {
          if (reg.test(this.ruleForm2.name) === false) {
            callback(new Error('请输入正确的身份证号码'));
          }
          callback();
        }
      };
       var password2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm2.password1.length<6) {
            callback(new Error('身份证号码长度不够'));
          }
          callback();
        }
      };
      return {
        ruleForm2: {
          name: '',
          password1: ''
        },
        rules2: {
          name: [
            { validator: name1, trigger: 'blur' }
          ],
          password1: [
            { validator: password2, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
        	var that=this;
          if (valid) {
            this.axios({
            	method:'post',
            	url:that.$store.state.globalTestApi+"/admin/Examinee/login",
            	data:{
            		idcard:this.ruleForm2.name,
            		password:this.ruleForm2.password1
            	}
            }).then(function(res){
   						if(res.data.msg=="登录成功"){
   							localStorage.setItem('id',res.data.data.id)
   							localStorage.setItem('name',res.data.data.name)
   							that.$router.push({
   								name:"myContentPage"
   							})
   						}else{
   							if(res.data.msg=='用户名密码不正确'){
   								that.$message.error('用户名或密码不正确');
   							}
   						}
            })
          } else {
            return false;
          }
        });
      }
    }
  }
</script>


<style>
.login .logo{padding-top: 80px;font-size: 32.59px;color: #fff;margin-bottom: 30px}
.login .logo img{vertical-align: middle;width: 69px;height: 60px;}
.login .demo-ruleForm h4{font-weight: normal;color: #386ce3;font-size: 16px;}
.login .el-form{padding:80px 20% 50px 20%;background-color: #fff;box-shadow: 0px 0px 3px rgba(0,0,0,0.3)}
.login .el-input{margin-top: 10px;}
.login .my-input input{border:0;border-bottom: 1px solid #c1c1c1;border-radius: 0px;}
.login .el-button{width: 100%;margin-top:30px ;}
@media screen and (max-width: 768px) {
	.login .logo{font-size: 20px;padding-top:50px;}
	.login .logo img{width: 39px;height: 33px;}
	.login .demo-ruleForm h4{font-size: 14px;}
	.login .el-form{padding: 50px 10% 30px 10%;}
}
</style>
